{extend name="common/base"/}
{block name="style"}
<style>
    .layui-tree-entry{font-size:15px; line-height:24px}
    .layui-tree-set{padding:2px 0}
    .layui-tree-iconClick .layui-icon{color:#1E9FFF}
    .layui-icon layui-icon-file{font-size:16px;}
    .layui-tree-icon {height: 14px;line-height: 14px; width: 14px; text-align: center;border: 1px solid #1E9FFF; color:#1E9FFF}
    .layui-tree-line .layui-tree-set .layui-tree-set:after{top:18px;}
    .tree-left{width:200px; float:left; height:calc(100% - 30px); overflow: scroll; border:1px solid #eeeeee; background-color:#FAFAFA; padding:12px 12px 12px 5px;}
    .tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}

    .gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; width:180px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}
    .gougu-upload-tips{color:#969696}
    .layui-form-item{margin-bottom:8px;}
    .layui-input-block{min-height:24px;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <form class="layui-form gg-form-bar border-t border-x">

        <div class="layui-input-inline" style="width:300px;">
            <input type="text" name="keywords" placeholder="名称" class="layui-input" autocomplete="off" />
        </div>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">搜索</button>
    </form>
    <table class="layui-hide" id="kefu" lay-filter="kefu"></table>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm add-menu" lay-event="add">+ 新增客服</button>

         </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
       <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--></div>
</script>
<script type="text/html" id="status">
    <i class="layui-icon {{#  if(d.status == 1){ }}layui-icon-ok{{#  } else { }}layui-icon-close{{#  } }}"></i>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    function gouguInit() {
        var table = layui.table,tool = layui.tool, form = layui.form,upload = layui.upload;
        layui.pageTable = table.render({
            elem: '#kefu',
            title: '客服列表',
            toolbar: '#toolbarDemo',
            url: '/webadmin/kefu/index', //数据接口
            page: true, //开启分页
            limit: 20,
            cols: [
                [ //表头
                    {
                        field: 'id',
                        title: 'id',
                        align: 'center',
                        width: 100
                    }, {
                    field: 'name',
                    title: '名称',
                    align: 'center',
                    width: 200,
                },{
                    field: 'kefu_img',
                    title: '二维码',
                    align: 'center',
                    width: 180,
                    templet: function(d) {
                        var html = '';
                        var images = '<img src="' + d.kefu_img + '" width="40" height="40"/>';
                        return images;
                    }
                },{
                    field: 'status',
                    title: '状态',
                    toolbar: '#status',
                    align: 'center',
                    width: 150,
                },{
                    field: 'createtime',
                    title: '添加时间',
                    align: 'center',
                    width: 200,
                },{
                    field: 'right',
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    align: 'center'
                }
                ]
            ]
        });


        //表头工具栏事件
        table.on('toolbar(kefu)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;
            if (obj.event === 'add') {
                tool.side("/webadmin/kefu/add");
                return;
            }

        });
        //监听行工具事件
        table.on('tool(kefu)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                tool.side('/webadmin/kefu/add?id='+data.id);
                return;
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            obj.del();
                        }
                    }
                    tool.delete("/webadmin/kefu/delete", { id: data.id }, callback);
                    layer.close(index);
                });
            }
        });


        //监听搜索提交
        form.on('submit(webform)', function(data) {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }
</script>
{/block}
<!-- /脚本 -->
